<template>
    <div>
        <navbar id="headerbox">
            <div v-if="so">
                <div class="box">登录</div>
                <div class="three" @touchstart="registbtn">免费注册</div>
            </div>
            <div v-else>
                <div class="box">注册</div>
                <div class="three" @touchstart="loginbtn">登录</div>
            </div>
                
        </navbar>  
        <div id="contentbox">
            <div :is="type" class="fi"></div>
        </div> 
        <footers></footers>
    </div>
</template>

<script>
import navbar from "../components/navbar"
import regist from "../components/regist"
import login1 from "../components/login1"
import footers from "../components/footers"
export default{
    data:function(){
        return{
            type:"login1",
            so:true
        }
    },
    components: {
        navbar,
        regist,
        login1,
        footers
    },
    methods: {
        registbtn:function(){
            this.type = "regist";
            this.so = false;
        },
        loginbtn:function(){
            this.type = "login1";
            this.so = true;
        }
    }
}
</script>

<style scoped>
#headerbox{
    font-size: 0.6rem;
}
.box{
    width: 60vw;
    text-align: center;
    line-height: 37px;
}
.three{
    padding-left: 9px;
    width: 25vw;
    height: 37px;
    /*border: solid 1px black;*/
    line-height: 37px;
    color: #eda200;
    position: absolute;
    top: 0px;
    right: 0;
}
#contentbox{
    margin-top: 37px;
    width: 100vw;
    height: 65vh;
    background-color: #f2f2f2;
    padding-top: 25px;
}
.fi{
    padding: 0 10px;
}
</style>